<template>
    <div class="addForm-view">
        <el-dialog :title="titleText" :visible.sync="dialogFormVisible" width="10%" :show-close="showimg">
            <el-form :model="comingData" :rules="rules" ref="comingData" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="type">
                    <div class="addForm-form-resource">
                        <div class="addForm-form-resource-radio">组织：</div>
                        <div>
                            <el-radio-group v-model="comingData.type">
                                <el-radio class="addForm-form-resource-radio"  :label="0">代理商</el-radio>
                                <el-radio class="addForm-form-resource-radio"  :label="1">开发商</el-radio>
                                <el-radio class="addForm-form-resource-radio"  :label="2">平台</el-radio>
                                <el-radio class="addForm-form-resource-radio"  :label="3">中介</el-radio>
                                <el-radio class="addForm-form-resource-radio"  :label="4">职能部门</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item prop="parentId">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title"><span>*</span>上级组织：</div>
                        <el-cascader
                                class="addForm-form-input-input"
                                placeholder="试试搜索：指南"
                                :options="treeList"
                                filterable
                                change-on-select
                                :show-all-levels="false"
                                :props="defaultProps"
                                v-model="comingData.parentId"
                                @change="handleChange"
                                :disabled="isNotShow"
                        ></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item prop="name">
                <div class="addForm-form-input">
                    <div class="addForm-form-input-title"><span>*</span>组织名称：</div>
                    <div>
                        <el-input
                                class="addForm-form-input-input"
                                placeholder="请输入组织名称"
                                v-model="comingData.name"
                                clearable>
                        </el-input>
                    </div>
                </div>
                </el-form-item>
                <el-form-item prop="linkman">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title">联系人：</div>
                        <div>
                            <el-input
                                    class="addForm-form-input-input"
                                    placeholder="请输入联系人"
                                    v-model="comingData.linkman"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item prop="linkTel">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title">联系电话：</div>
                        <div>
                            <el-input
                                    class="addForm-form-input-input"
                                    placeholder="请输入联系电话"
                                    v-model="comingData.linkTel"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item prop="companyAddress">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title">公司地址：</div>
                        <div>
                            <el-input
                                    class="addForm-form-input-input"
                                    placeholder="请输入公司地址"
                                    v-model="comingData.companyAddress"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item prop="remark">
                    <div class="addForm-form-input">
                        <div class="addForm-form-input-title">备注：</div>
                        <div>
                            <el-input
                                    class="addForm-form-input-input"
                                    placeholder="请输入备注"
                                    v-model="comingData.remark"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-button"  @click="closeForm" >取 消</el-button>
                <el-button class="sure-button" type="primary" @click="saveStruct(comingData)">保 存</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {telePhone} from "../../../utils/regular"
    //数组里面每个对象的ID和parenId都组成另外一个对象存起来
    function tree2Normal(newArray, sourceArray) {
        sourceArray.forEach(item => {
            newArray.push({
                id: item.id,
                parentId: item.parentId
            });
            if (item.children.length > 0) {
                tree2Normal(newArray, item.children);
            }
        });
    }

    function findFathers(newArray, sourceArray, id) {
        let parentId = sourceArray.find(item => item.id == id)
            ? sourceArray.find(item => item.id == id).parentId
            : 0;
        if (parentId != 0) {
            newArray.unshift(parentId);
            findFathers(newArray, sourceArray, parentId);
        }
    }
    export default {
        name: "addForm",
        props:{
            seeDetails:{
                type:Object,
            },
            dialogFormVisible: {
                type: Boolean
            },
        },
        watch: {
            seeDetails:{
                handler(newValue, oldValue) {
                    console.log(newValue);
                    this.id=newValue.id
                    let _this = this;
                    _this.Api.setting.queryStructTree({structId:newValue.parentId}).then(data => {
                        this.treeList = data.data;
                        if (newValue) {
                            for (let props in newValue) {
                                this.comingData[props] = newValue[props];
                            }
                            var id = newValue.id;
                            let newArray = [];
                            tree2Normal(newArray, data.data);
                            let newArray2 = [];
                            findFathers(newArray2, newArray, id);
                            if (newArray2.length == 0) {
                                newArray2[0] = this.comingData.parentId;
                            }
                            this.comingData.parentId = newArray2;
                            console.log(this.comingData)
                        }
                    });
                },
                deep: true
            }
        },
        data(){
            var validatePhone= (rule, value, callback) => {
                if (value&&!telePhone(value)) {
                    callback(new Error('请输入正确的11位手机号码'))
                }else {
                    callback();
                }
            }
            return{
                enterpriseId:JSON.parse(sessionStorage.getItem("userIdentification")).enterpriseId,
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                titleText:this.seeDetails?"编辑组织":"新增组织",
                isEdit:this.seeDetails?true:false,
                isNotShow:false,
                resource:0,
                treeList:[],
                showimg:false,
                comingData: {
                    id:"",
                    name: undefined,
                    type:0,
                    parentId: undefined,
                    linkman: undefined,
                    linkTel: undefined,
                    companyAddress: undefined,
                    remark: undefined
                },
                rules:{
                    name: [
                        { required: true, message: '请输入组织名称', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1到 50 个字符', trigger: 'blur' }
                    ],
                    parentId: [
                        { type: 'array', required: true, message: '请选择内容', trigger: 'change' }
                    ],
                    linkTel:[
                        { validator: validatePhone, trigger: 'blur' }
                    ],
                },
                inputvalue:[],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    value:'id',
                }
            }
        },
        mounted(){

            //如果为编辑页面，则上级组织机构不允许修改
            if (this.isEdit) {
                this.isNotShow = true
            }
            console.log(this.showDetails,"lalal");
            let _this = this;
            let params={
                structId:this.organizationId,
            }
            _this.Api.setting.queryStructTree(params).then((data)=>{
                this.treeList=data.data
            })
        },
        methods: {
            handleChange(e) {
                let a = e.length;
            },
            closeForm() {
                console.log("aaaaaaa")
                this.comingData={
                        type:0,//类型
                        parentId:[],//上级组织id
                        name:"",//组织名称
                        linkman:"",//联系人
                        linkTel:"",//联系电话
                        companyAddress:"",//公司地址
                        remark:"",//备注
                },
                this.$emit("close");
            },
            saveStruct(formname){
                let _this = this;
                if(this.seeDetails){
                    var params={
                        id:this.comingData.id,
                        name:this.comingData.name,//组织名称
                        type:this.comingData.type,//类型
                        usable:this.comingData.usable,
                        parentId:this.comingData.parentId[this.comingData.parentId.length-1],//上级组织id
                        linkman:this.comingData.linkman,//联系人
                        linkTel:this.comingData.linkTel,//联系电话
                        companyAddress:this.comingData.companyAddress,//公司地址
                        remark:this.comingData.remark,//备注
                    }
                }else {
                    var params={
                        name:this.comingData.name,//组织名称
                        type:this.comingData.type,//类型
                        parentId:this.comingData.parentId[this.comingData.parentId.length-1],//上级组织id
                        linkman:this.comingData.linkman,//联系人
                        linkTel:this.comingData.linkTel,//联系电话
                        companyAddress:this.comingData.companyAddress,//公司地址
                        remark:this.comingData.remark,//备注
                    }
                }


                this.$refs.comingData.validate((valid) => {
                    if (valid) {

                        if (_this.isEdit) {
                            _this.Api.setting.updateStruct(params).then((data)=>{
                                if (data.returnCode == 10000) {
                                    this.$alert('更新组织机构成功', '正常提示', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            this.closeForm()
                                            this.$emit("refreshList");
                                            this.$emit("refreshTree");
                                        }
                                    });
                                } else {
                                    this.$alert(data.msg, '异常提示', {
                                        confirmButtonText: '确定',
                                        center: true,
                                        callback: action => {
                                            // this.closeForm()
                                            console.log("更新组织机构失败！" + data.msg)
                                        }
                                    });
                                }

                            });
                        } else {
                            _this.Api.setting.addStruct(params).then((data)=>{
                                if (data.returnCode == 10000) {
                                    this.$alert('新增组织机构成功', '正常提示', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            this.closeForm()
                                            this.$emit("refreshList");
                                            this.$emit("refreshTree");
                                        }
                                    });
                                } else {
                                    this.$alert(data.msg, '异常提示', {
                                        confirmButtonText: '确定',
                                        center: true,
                                        callback: action => {
                                            console.log("更新组织机构失败！" + data.msg)
                                        }
                                    });
                                }
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }
        }
    }
</script>
<style>
    .addForm-view .el-dialog--small {
        width:517px;
    }
   .addForm-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
  .addForm-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
   .addForm-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
    .addForm-view .el-form-item__content{
        /*margin-right:100px;*/
        margin-left: 0px !important;
        width: 100%;
    }
    .addForm-view  .el-form-item{
        margin-bottom:0px
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.addForm-form-resource{
    display: flex;
    margin-top: 24px;
    justify-content: center;
}

.addForm-form-resource-radio{
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,0.65);
    line-height:22px;
    align-self: center;
    margin-right: 5px;
}
.addForm-form-input{
display: flex;
    margin-top: 24px;
    justify-content: center;
}
.addForm-form-input-title{
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(0,0,0,0.85);
    line-height:22px;
    align-self: center;
    min-width: 85px;
    text-align: right;
    span{
        color: #FF0606;
        margin-bottom: -3px;
    }
}
    .addForm-form-input-input{
        width:375px;
        height:32px;
        background:rgba(255,255,255,1);
        border-radius:4px;
    }
.addForm-form-input-input-red{
    width:375px;
    height:32px;
    background:rgba(255,255,255,1);
    border-radius:4px;
    border: 1px solid red;
    overflow: hidden;
}
    .cancel-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        border:1px #D9D9D9 solid;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.25);
        text-align: center;
    }
.sure-button{
    padding: 0px;
    width:78px;
    height:32px;
    line-height:32px;
    border-radius:4px;
    background:rgba(24,144,255,1);
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
}
    .dialog-footer{
    }
</style>